  <template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
<!--      <div class="search">-->
<!--&lt;!&ndash;        <el-popover placement="bottom" width="300" popper-class="searchPop" trigger="focus">&ndash;&gt;-->
<!--          <el-input placeholder="请输入故障现象内容" prefix-icon="el-icon-search" slot="reference" v-model="searchInput" @keyup.enter.native="OnSubmit"></el-input>-->
<!--&lt;!&ndash;        </el-popover>&ndash;&gt;-->

<!--      </div>-->
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <img src="../assets/camera2.png" alt="" class="user1">
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>people center</el-dropdown-item>
          <el-dropdown-item>exit</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>

</template>

<script>
export default {
  name: "CompHeader",
  data(){
    return {
      searchInput:"",
    }
  },
  methods:{
    handleMenu(){
      this.$store.commit('CollapseMenu')
    },
    OnSubmit(e){
      if (e.keyCode == 13 && this.searchInput != "") {
        this.goSearch();
      }
    },
    goSearch () {
      this.$router.push({ name: "device_query", params: { id: this.searchInput } });
    },
}
}
</script>

<style scoped>
header{
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.l-content{
  display: flex;
  align-items: center;

}
.el-button{
  margin-right: 20px;
}
.user1{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>